/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
body {
	line-height: 1; }
ol, ul {
	list-style: none; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
.ie7 img { -ms-interpolation-mode: bicubic; }


/* #Basic Styles
================================================== */
body {
	background: #eee;
	font: 13px/18px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #4c4c4c;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility: hidden; /* Fix this webkit bug: http://stackoverflow.com/questions/11589985/webkit-text-aliasing-gets-weird-during-css3-animations */
}


/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
	color: #404040;
	font-family: 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-shadow: 0px 1px 0px #fff;
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
	color: #efefef;
	text-shadow: 0px 2px #000;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h2 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h3 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h4 { font-size: 17px; line-height: 24px; }
h5 { font-size: 14px; line-height: 21px; }
h6 { font-size: 13px; line-height: 19px; }
.subheader { color: #777; }
.dark .subheader {
	color: #ccc;
	text-shadow: none;
}

p { margin: 0 0 20px 0; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777;  }

em {font-style: italic;}
strong {font-weight: bold; color: #333;}
.dark strong {color: #dbdbdb;}
small {font-size: 80%;}
smaller {font-size: smaller;}

/*	Blockquotes  */
blockquote, blockquote p { font-size: 15px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 14px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

hr {
	border: none;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #fff;
	clear: both;
	margin: 10px 0;
	height: 0;
}
.dark hr {
	border-top: 1px solid #000;
	border-bottom: 1px solid #2c2c2c;
}

::selection {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background: rgba(34, 34, 34, .99);
	text-shadow: none;
}
.dark ::selection {
	color: #111;
	-webkit-text-fill-color: #111;
	background: rgba(255, 255, 255, .99);
	text-shadow: none;
}
img::selection {
	background: rgba(0, 0, 0, .3);
}
.dark img::selection {
	background: rgba(0, 0, 0, .3);
}

::-moz-selection {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background: rgba(34, 34, 34, .99);
	text-shadow: none;
}
.dark ::-moz-selection {
	color: #111;
	-webkit-text-fill-color: #111;
	background: rgba(255, 255, 255, .99);
	text-shadow: none;
}
img::-moz-selection {
	background: rgba(0, 0, 0, .3);
}
.dark img::-moz-selection {
	background: rgba(0, 0, 0, .3);
}



/* #Links
================================================== */
a, a:visited, button { 
	color: #555; 
	text-decoration: underline; 
	outline: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition:all 1s ease;
}
a:hover, a:focus, button:hover {
	color: #000;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
p a, p a:visited { line-height: inherit; }

.dark a, .dark a:visited {color:#999;}
.dark a:hover, .dark a:focus { color: #fff; }

a img {
	opacity: 1;
	-webkit-transition:opacity 1s ease;
	-moz-transition:opacity 1s ease;
	-o-transition:opacity 1s ease;
	transition:opacity 1s ease;
}
a:hover img {
	zoom: 1;
	opacity: 0.7;
	filter: alpha(opacity=70);
	-webkit-transition:opacity 0.3s ease;
	-moz-transition:opacity 0.3s ease;
	-o-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
}
.no-transition {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: all 0 ease !important;
	transition: none !important;
}


/* #Lists
================================================== */
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }


/* #Images
================================================== */

img.scale-with-grid {
	max-width: 100%;
	height: auto;
}
img.alignright {
	float: right;
	margin: 0 0 10px 10px;
}
img.alignleft {
	float: left;
	margin: 0 10px 10px 0;
}


/* #Buttons (default color: grey)
================================================== */

a.button,
a.button:visited,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url();
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.09) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.09))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.09) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#17000000',GradientType=0 ); /* IE6-8 */
	background-color: #fff;
	color: #555;
	text-shadow: 1px 1px rgba(255, 255, 255, 1);
	border: 1px solid #eee;
	border-top: 1px solid #ccc;
	-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3),
					 0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3),
					    0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.3),
				0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
				
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	padding: 4px 12px;
	margin-bottom: 20px;
	line-height: 21px;
	font-family: 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	background-color: #f1f1f1;
	border-bottom: 1px solid #e7e7e7;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.6);
	-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 
					 0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
	-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 
					    0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.3), 
				0px 0px 5px 0px rgba(255, 255, 255, 0.7) inset;
}

a.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	background-color: #ddd;
	border: 1px solid #999;
	border-bottom: 1px solid #888;
	-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3),
					 0px 1px 10px -3px #000 inset;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3), 
						0px 1px 10px -3px #000 inset;
	box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.3),
				0px 1px 10px -3px #000 inset;
	text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
}
.ie7 a.button,
.ie7 a.button:visited,
.ie7 button,
.ie7 input[type="submit"],
.ie7 input[type="reset"],
.ie7 input[type="button"],
.ie8 a.button,
.ie8 a.button:visited,
.ie8 button,
.ie8 input[type="submit"],
.ie8 input[type="reset"],
.ie8 input[type="button"] {
	border: 1px solid #ccc;
	border-bottom: 1px solid #acacac;
}


/* === Buttons in dark context === */
.dark a.button,
.dark a.button:visited,
.dark button,
.dark input[type="submit"],
.dark input[type="reset"],
.dark input[type="button"] {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url();
background: -moz-linear-gradient(top,  rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.09)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(255,255,255,0.09) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
	background-color: #202020;
	border: none;
	color: #ccc;
	text-shadow: 1px 1px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1),
					 0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,1),
					    0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,1),
				0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
}

.dark a.button:hover,
.dark button:hover,
.dark input[type="submit"]:hover,
.dark input[type="reset"]:hover,
.dark input[type="button"]:hover {
	background-color: #2b2b2b;
	color: #fff;
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,1),
					 0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,1),
					    0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,1), 
				0px 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
}

.dark a.button:active,
.dark button:active,
.dark input[type="submit"]:active,
.dark input[type="reset"]:active,
.dark input[type="button"]:active {
	background-color: #222;
	color: #999;
	-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 
					 0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 
						0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset;	 
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1), 
				0px 1px 10px 2px rgba(0, 0, 0, 0.7) inset;
}
.ie7 .dark a.button,
.ie7 .dark a.button:visited,
.ie7 .dark button,
.ie7 .dark input[type="submit"],
.ie7 .dark input[type="reset"],
.ie7 .dark input[type="button"],
.ie8 .dark a.button,
.ie8 .dark a.button:visited,
.ie8 .dark button,
.ie8 .dark input[type="submit"],
.ie8 .dark input[type="reset"],
.ie8 .dark input[type="button"] {
	border: 1px solid #313131;
	border-top: 1px solid #414141;
}

/* On-the-fly classes to change button's color (experimental)
.blue {
	background-color: #5891b5;
	color: #033b5e;
	text-shadow: 0 1px rgba(255, 255, 255, .35);
	border: 1px solid #5891b5;
}
*/


/* ie9 fails to render rounded-corners + gradient made with filter */
.ie9 a.button,
.ie9 a.button:visited,
.ie9 button,
.ie9 input[type="submit"],
.ie9 input[type="reset"],
.ie9 input[type="button"] {
	filter: none;
}


.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center; 
}
textarea.full-width {
	width: 98%;
}

a.button.featured,
a.button.featured:visited,
button.featured,
.button.featured,
.button.call-to-action,
.button.call-to-action:visited {
	display: block;
	width: 60%;
	text-align: center;
	margin: 10px auto 10px auto;
	font-size: 14px;
	line-height: auto;
	padding: 7px 20px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}


/* #Tabs
================================================== */
ul.tabs {
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: solid 1px #ddd; }
.dark ul.tabs {
	border-color: #262626;
}
ul.tabs li {
	display: block;
	width: auto;
	height: 30px;
	padding: 0;
	float: left;
	margin-bottom: 0; }
ul.tabs li a {
	display: block;
	text-decoration: none;
	width: auto;
	height: 29px;
	padding: 0px 20px;
	line-height: 30px;
	border: solid 1px #ddd;
	border-width: 1px 1px 0 0;
	margin: 0;
	background: #f5f5f5;
	font-size: 13px;
	-webkit-transition: background 1s ease,
						color 1s ease;
	-moz-transition: background 1s ease,
					 color 1s ease;
	-o-transition: background 1s ease,
				   color 1s ease;
	transition: background 1s ease,
				color 1s ease;
}
ul.tabs li a:hover {
	background: #f0f0f0;
	color: #111;
	-webkit-transition: background 0.3s ease,
						color 0.3s ease;
	-moz-transition: background 0.3s ease,
					 color 0.3s ease;
	-o-transition: background 0.3s ease,
				   color 0.3s ease;
	transition: background 0.3s ease,
				color 0.3s ease;
}
ul.tabs li a.active {
	background: #f6f6f6;
	height: 30px;
	position: relative;
	top: -4px;
	padding-top: 4px;
	border-left-width: 1px;
	margin: 0 0 0 -1px;
	color: #111;
	-webkit-border-radius: 3px 3px 0 0;
	-moz-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}
ul.tabs li:first-child a.active {
	margin-left: 0; }
ul.tabs li:first-child a {
	border-width: 1px 1px 0 1px;
	-moz-border-radius-topleft: 3px;
	-webkit-border-top-left-radius: 3px;
	border-top-left-radius: 3px; }
ul.tabs li:last-child a {
	-moz-border-radius-topright: 3px;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px; }

ul.tabs-content {
	background: #f6f6f6;
	color: #4c4c4c;
	margin: 0;
	padding: 20px 10px 10px 10px;
	display: block;
	border: solid 1px #ddd;
	border-width: 0 1px 1px 1px;
	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}
/* Tabs in black context */
.dark ul.tabs li a {
	background: #0e0e0e;
	border-color: #262626;
}
.dark ul.tabs li a:hover {
	background: #090909;
	color: #fff;
}
.dark ul.tabs li a.active {
	background: #171717;
	border-color: #2C2C2C;
	color: #fff;
}
.dark ul.tabs-content {
	background: #171717;
	color: #ccc;
	border-color: #262626;
}
ul.tabs-content > li { display:none; }
ul.tabs-content > li.active { display: block; }

/* Clearfixing tabs for beautiful stacking */
ul.tabs:before,
ul.tabs:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
ul.tabs:after {
  clear: both; }
ul.tabs {
  zoom: 1; }


/* #Forms
================================================== */

form {
	margin-bottom: 20px;
}
fieldset {
	margin-bottom: 20px; 
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
	border: 1px solid #ccc;
	padding: 10px;
	margin: 0;
	outline: none;
	font: 13px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #777;
	width: 100%;
	max-width: 100%;
	background: #fff;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	/* "all" isn't used because then height is also transitioned and interfers with user's action on textarea height */
	-webkit-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease;
	-moz-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease;
	-o-transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease;
	transition:border 0.3s ease, background 0.3s ease, box-shadow 0.2s ease, color 0.6s ease;

	/* Act as display:block; 
	   see http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not 
	   ie7 isn't supported here, see static fix bellow */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.ie7 input[type="text"],
.ie7 input[type="password"],
.ie7 input[type="email"],
.ie7 textarea,
.ie7 select {
	width: 378px; /* 378px + 10px_padding_x2 + 1px_border_x2 = 400px (seven columns full width) */
	/* note: ie7 doesn't support media-queries so this fix is enough for desktop uses */
}

.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark textarea,
.dark select {
	border: 1px dashed #333;
	color: #a1a1a1;
	background: #191919;
	-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4);
}
	
select {
	padding: 0;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
textarea:hover {
	background: #f2f2f2;
}
.dark input[type="text"]:hover,
.dark input[type="password"]:hover,
.dark input[type="email"]:hover,
.dark textarea:hover {
	background: #161616;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
	border: 1px solid #aaa;
	color: #444;
	background: #f2f2f2;

	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2);
}
	
.dark input[type="text"]:focus,
.dark input[type="password"]:focus,
.dark input[type="email"]:focus,
.dark textarea:focus {
	border: 1px solid #282828;
	color: #fff;
	background: #191919;

	/* if the outer shadow isn't specified, transition doesn't occur */
	-webkit-box-shadow: 0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset;
	-moz-box-shadow: 0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset;
	box-shadow:0 0 0 transparent, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset;
}
	
textarea {
	min-height: 130px;
	overflow: auto;
}
label,
legend {
	display: block;
	font-weight: bold;
	font-size: 13px;
	text-align: right;
	padding-right: 20px;
}
select {
	width: 220px; }
input[type="checkbox"] {
	display: inline; }
label span,
legend span {
	font-weight: normal;
	font-size: 13px;
	color: #444; 
	display: block;
}

.ajax-response {
	margin: 6px 0 0 5px;
}
.form-error-msg {
	margin: 6px 0 0 5px;
	color: #d82f2f;
}
.form-error {
	-moz-box-shadow: 0 0px 15px -5px #FF0000 !important;
	-webkit-box-shadow: 0 0px 15px -5px #FF0000 !important;
	box-shadow: 0 0px 15px -5px #FF0000 !important;
	border: 1px solid rgba(255, 0, 0, 0.5) !important;
}
.dark input[type="text"].form-error:focus,
.dark input[type="password"].form-error:focus,
.dark input[type="email"].form-error:focus,
.dark textarea.form-error:focus {
	-moz-box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important;
	-webkit-box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important;
	box-shadow: 0 0px 15px -5px #FF0000, 1px 1px 5px 1px rgba(0, 0, 0, 1) inset !important;

}
form li {
	float: left;
	padding: 3px;
	margin: 3px 0;
	background: #111;
	background: none;
}


form li label {
	width: 150px;
	float: left;
	text-align: right;
	padding-right: 15px;
}
form li label span {
	color: #999;
	display: block;
}
form button {
	float: right;
	margin: 0 10px 0 0;
}



/* #Misc
================================================== */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }
.add-more-bottom { margin-bottom: 40px !important; }
.add-top { margin-top: 10px !important; }
.add-more-top { margin-top: 20px !important; }


/* Spark Layout */
body, html {
	overflow: hidden;
}
html.mobile,
html.modern-mobile {
	overflow: auto;
}
#main {
    position: absolute;
    overflow-y: scroll;
	top:89px;
	left:0; 
	bottom:0; 
	right:0;
}
header {
	background: #eee;
	border-top: 6px solid #000;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
}

/* ==== Webkit Mobile (iOS5.1+ and Android 4.0+) ==== */
.modern-mobile #main {
	position: static;
	overflow: hidden;
	margin-top: 89px;
}

/* ==== All other mobile platforms (including old Webkit Mobile versions) ==== */
.mobile #main { 
	position: static;
	overflow: hidden;
}
.mobile header { /* old mobiles: no fixed-header */
	position: relative;
}


header h1.logo {
	float: left;
	margin-top: 0;
	margin-bottom: 0;
}
header h1 a {
	display:block;
	max-height: 80px;
}
nav ul {
	float: right;
	height: 61px;
}
nav li {
	list-style: none;
	display: block;
	float: left;
	margin-top: -6px;
	margin-bottom: 0;
}

/* Blurr effect (experimentation) */
/*
nav:hover a {
	color: #9a9ca6;
	color: rgba(0,0,0, 0.01);
	text-shadow: 0 0 4px #9a9ca6 !important;
	}

nav a:hover {
	color: #fff;
	color: rgba(255,255,255, 1.0);
	text-shadow: none !important;
}
*/

nav a, 
nav a:visited,
nav a:focus {
	display: block;
	height: 63px;
	padding: 20px 20px 0 20px;
	text-decoration: none;
	color:#666;
	font-weight	: 600;
	border-top: 3px solid #000;
	margin-top: 1px;
}
nav a:hover {
	color: red;
	border-top-color: #c1c1c1;
}
nav a.active,
nav a.active:focus {
	color: #37b1ff;
	border-top-color: #37b1ff;
	-webkit-transition:color 0.3s ease, 
					   border-color 0.3s ease,
					   background-color 0.3s ease;
	-moz-transition:color 0.3s ease, 
					border-color 0.3s ease,
					background-color 0.3s ease;
	-o-transition:color 0.3s ease, 
				  border-top-color 0.3s ease,
				  background-color 0.3s ease;
	transition:color 0.3s ease, 
			   border-color 0.3s ease,
			   background-color 0.3s ease;
}
nav a.active:hover {
	color: #000;
	border-top-color: #37b1ff;
}
nav a span {
	color: #c1c1c1;
	font-size: 12px;
	font-weight	: normal;
}


article {
	padding: 40px 0;
}
#main article:first-of-type {
	padding-top: 20px;
}
article .row:last-of-type {
	margin-bottom: 0;
}
.mobile-only, /* singular variant kept for compatibility */
.mobiles-only, .tablets-only {
	display: none; /* display:block; in the Media-Queries */
}
.dark {
	background: #212121 url("../images/black_paper.jpg") repeat;
	color: #dbdbdb;
}
.bottom {
    text-align: center;
    font-weight: bold;
}

/* Box styling */
.box {
	background: #fff;
	display: block;
	padding: 10px;
	-webkit-box-shadow: 0 0 5px #d5d5d5;
	-moz-box-shadow: 0 0 5px #d5d5d5;
	box-shadow: 0 0 5px #d5d5d5;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.container .column.box,
.container .columns.box {
	margin-left: 0;
	margin-right: 0;
}
.container .row.box {
	padding: 10px 0;
}
.dark .container .column.box,
.dark .container .columns.box,
.dark .box,
.dark .box.dark {
	background: #000;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 1px solid #2c2c2c;
	margin-left: -1px; /* Compensate the 1px border */
	margin-right: -1px;
}
.box.dark {
	background: #222;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 1px 1px 3px 0px #fff;
	background: #212121 url("../images/black_paper.jpg") repeat;
}


.box.light {
	background: rgba(255,255,255,0.5);
}
.dark .container .column.box.light,
.dark .container .columns.box.light,
.dark .box.light,
.dark .box.light {
	background: rgba(0,0,0,0.3);
}
.box.scale-with-grid {
	max-width: 90%;
}

.featured {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 15px 40px -20px rgba(0, 0, 0, 0.7);
}
.dark .featured {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.box.featured {
	margin-top: -15px;
	padding-top: 15px;
}
img.featured {
	-webkit-box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1);
	-moz-box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1);
	box-shadow: 0px 8px 40px -10px rgba(0, 0, 0, 1);
}
.dark img.featured {
	-webkit-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1);
	-moz-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1);
	box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 1);
}
/*
blockquote,
.blockquote {
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:0 0 3px rgba(0,0,0,0.3);
	-moz-box-shadow:0 0 3px rgba(0,0,0,0.3);
	box-shadow:0 0 3px rgba(0,0,0,0.3);
	background:rgba(255,255,255,0.04);
	border:1px dashed rgba(255,255,255,0.1);
}
*/




a.imglink {
	text-decoration: none;
}

/* Apply .headset to any container that should have a floating img */
.headset img {
	float:left;
	margin: 0 10px 5px 0;
}
.headset p,
.headset h2,
.headset h3,
.headset h4,
.headset h5 {
	margin-left: 70px;
}
.headset.price p, 
.headset.price h2, 
.headset.price h3, 
.headset.price h4, 
.headset.price h5 {
	float: left;
	margin: 10px 0 0 5px;
}
.headset span {
	float: right;
	font-size: 30px;
	padding: 15px 0px 2px 0;
}
.headset span sup {
	font-size: 18px;
}
.headset span sub {
	bottom: 0;
	font-size: 18px;
}
.titleset {
	margin-bottom: 30px;
}

/* gradients */
.bottom-gradient {
	position:relative;
	height:0;
	border-top:1px solid #ddd;
	border-bottom:1px solid #fff;
	z-index:-99;
	clear:both;
	margin:0;
}
.bottom-gradient.between-rows {
	margin: -15px 0 15px 0;
}
.bottom-gradient .container {
	height: 0;
}
.bottom-gradient span {
    border: medium none;
    display: block;
    height: 80px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -80px;
    z-index: -100;
}	
.bottom-gradient .left {
	background:no-repeat url(../images/combined_gradient.png) 0 0;
	background:-webkit-radial-gradient(bottom right,circle,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
	background:-moz-radial-gradient(bottom right,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
	width:80px;
	left:0;
}

.bottom-gradient .center {
	background:no-repeat url(../images/combined_gradient.png) -114px 0;
	background:-webkit-radial-gradient(bottom left,circle,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
	background:-moz-radial-gradient(bottom left,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
	width:80px;
	right:0;
}

.bottom-gradient .right {
	position:relative;
	margin-left:80px;
	margin-right:80px;
	top:-80px;
	background:url(../images/gradient.png);
	background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
	background:-moz-linear-gradient(bottom,rgba(0,0,0,0.06),rgba(0,0,0,0) 80px);
}

.dark .bottom-gradient {
	border-top: 1px solid #000;
	border-bottom: 1px solid #2c2c2c;
	z-index: 0;
}
.dark .bottom-gradient span {
	display: none;
}

/* content-specific containers */
.welcome-container {
	padding: 10px 20px;
}

/* Shadows effect (experimental. not yet ported on .dark sections) */
.enjoliver {
	position: relative;
	line-height: 0px;
	float: left;
	width: auto;
	height: auto;
	max-width: 100%;
	padding: 7px;
	border-radius: 1px;
	border: 1px solid #f9f9f9;
	background: #fff;
	
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset;
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset; 
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.12) inset; 
}
.enjoliver img {
	-webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 1);
}
.enjoliver:before,
.enjoliver:after {
	content: '';
	z-index: -1;
	position: absolute;
	left: 10px;
	bottom: 12px;
	width: 70%;
	max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
	max-height: 100px;
	height: 55%;
	
	-webkit-box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2);
	box-shadow: 0 12px 15px rgba(0, 0, 0, 0.2);
	
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	-ms-transform: skew(-15deg) rotate(-6deg);
	-o-transform: skew(-15deg) rotate(-6deg);
	transform: skew(-15deg) rotate(-6deg);
}
.enjoliver:after {
	left: auto;
	right: 10px;
	
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	-ms-transform: skew(15deg) rotate(6deg);
	-o-transform: skew(15deg) rotate(6deg);
	transform: skew(15deg) rotate(6deg);
}

/* Responsive video embed support */
.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video iframe, .video object, .video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* End of file to load last */
header, body {
		background: #eee url();
}